<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRoute } from "vue-router";
import axios from "axios";

//获取到路由对象 为了后续 获取到路由参数
const route = useRoute();
const typeId = ref(-1);

// 封装获取书籍数据的方法
const initData = () => {
  axios.post(`/book/getBookByTypeId/${typeId.value}/${currentPage.value}/${pageSize.value}`).then(res => {
    books.value = res.data.obj.obj;
    total.value = res.data.obj.total;
  }).catch(error => {
    console.error('获取书籍数据失败:', error);
  });
};

watch(() => route.query.id, (newId) => {
  typeId.value = newId;
  initData();
});

const books = ref([]);
const currentPage = ref(1);
const pageSize = ref(3);
const total = ref(0);

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  initData(); // 当每页数量改变时，重新获取数据
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  initData(); // 当页码改变时，重新获取数据
};
</script>

<template>
  <div class="book-list">
    <div class="book-item" v-for="book in books" :key="book.id">
      <img :src="`book-mall/${book.imgSrc}`" alt="book cover" class="book-cover">
      <div class="book-info">
        <h3>{{ book.name }}</h3>
        <p>作者: {{ book.author }}</p>
        <p>价格: {{ book.price }}</p>
        <p>销量: {{ book.buyCount }}</p>
      </div>
    </div>

  </div>
  <!-- 将分页组件移到书籍列表下方 -->
  <div class="pagination-container">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4, 5, 6]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<style scoped>
.book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  padding: 40px;
}

.book-item {
  background-color: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

.book-item:hover {
  transform: translateY(-5px);
}

.book-cover {
  width: 160px;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.book-info h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
}

.book-info p {
  font-size: 14px;
  color: #a0a0a0;
  margin-bottom: 5px;
}

.pagination-container {
  grid-column: 1 / -1; /* 使分页组件横跨所有列 */
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.el-pagination {
  color: #e0e0e0;
}

.el-pagination .el-pager li {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: none;
  margin: 0 5px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.el-pagination .el-pager li:hover {
  background-color: #3a3a3a;
}

.el-pagination .el-pager li.active {
  background-color: #007bff;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  background-color: #3a3a3a;
}
</style>